@import 'scss-imports/cssvars';

.container {
  display: flex;
  flex-direction: column;
  width: 100%;

  @media (min-width: $breakpoint-md) {
    height: 300px;
  }
}

.disk-details-header {
  align-items: center;
  border-bottom: solid 1px var(--lines);
  display: flex;
  font-size: 1.15rem;
  gap: 15px;
  height: 50px;
  padding: 12px 16px;

  button {
    height: 30px;
    width: 30px;
  }
}

.disk-details-container {
  display: flex;
  height: 100%;

  @media (max-width: $breakpoint-sm) {
    flex-wrap: wrap;
  }

  .drive {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    width: 25%;

    @media (max-width: $breakpoint-md) {
      margin-top: 10px;
      width: 100%;
    }

    .capacity {
      font-size: 120%;
      font-weight: 500;
    }
  }

  .details {
    border-left: solid 1px var(--lines);
    overflow: auto;
    padding: 0 12px;
    width: 75%;

    @media (max-width: $breakpoint-md) {
      margin-top: 20px;
      width: 100%;
    }
  }
}

.slot-empty {
  align-items: center;
  display: flex;
  font-size: 20px;
  height: 100%;
  justify-content: center;
  min-height: 200px;
  padding-bottom: 5px;
}
